﻿  <script type="text/javascript">
      $(function () {
          $("#album").buttonset();
          $(".album-tab").hide();
          $("#album-tab-0").show();
      });

      function switchAlbum(i) {
          $(".album-tab").hide();
          $("#album-tab-" + i).show();
          return false;
      }

      $(function () {
          var filesList = [];
          $('#fileupload').hide().fileupload({
              dropZone: $("#upload"),
              disableImageResize: /Android(?!.*Chrome)|Opera/
                  .test(window.navigator.userAgent),
              imageMaxWidth: 2560,
              imageMaxHeight: 2560,
              previewMaxWidth: 100,
              previewMaxHeight: 100,
              previewCrop: true,
              acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
              autoUpload: false
          }).on('fileuploadprogressall', function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);
              progressBar.progressbar("value", progress);
              if (progress > 99.9) {
                  progressBar.progressbar("value", false);
                  progressLabel.text("Processing...");
              }
          }).on('fileuploadadd', function (e, data) {
              $.each(data.files, function (index, file) {
                  filesList.push(file);
              });
          }).on('fileuploadprocessalways', function (e, data) {
              var file = data.files[data.index];
              if (file.preview) {
                  $("#upload span").hide();
                  $("#upload").append(file.preview);
              }
          }).on('fileuploaddragover', function (e, data) {
              $("#upload").addClass('drop');
          }).on('fileuploaddrop', function (e, data) {
              $("#upload").removeClass('drop');
          });

          $('#upload').bind('dragleave', function (e) {
              $("#upload").removeClass('drop');
          });

          $("#save-photo").click(function () {
              $("#newest-id").val(nid);
              $(this).hide();
              progressBar.show().progressbar("value");
              var xhr = $('#fileupload').fileupload('send', { files: filesList }).done(function (result) {
                  var r = ProcessAjaxResult(result);
                  if (r != null) {
                      SentAction(r);
                      filesList = [];
                      $('#photo-form').trigger("reset");
                      $('#upload canvas').remove();
                      switchTab(0);
                  }
                  progressBar.hide();
                  $("#upload span").show();
                  $("#photo-form :input").attr("disabled", false);
                  $("#save-photo").show();
              });
              $("#photo-form :input").attr("disabled", true);
              return false;
          });

          $("#photo-form").append('<input type="hidden" name="ajax" value="true" />');
          var progressBar = $("#progressbar"), progressLabel = $(".progress-label");

          progressBar.hide().progressbar({
              value: false,
              change: function () {
                  progressLabel.text(progressBar.progressbar("value") + "%");
              },
              complete: function () {
                  progressLabel.text("Upload complete");
              }
          });

      });
  </script>

<form id="photo-form" action="{S_ACCOUNT}" method="post" enctype="multipart/form-data">
		<div id="compose-status">

        <dl>
            <dt><label for="description">Description</label></dt>
			<dd>
				<textarea id="description" name="description" style="margin: 0px; width: 100%; height: 50px;" cols="70" rows="4">{S_DESCRIPTION}</textarea>
			</dd>
            <dt>&nbsp;</dt>
            <dd>
                <input id="fileupload" type="file" name="photo-files[]" data-url="{S_ACCOUNT}" multiple="multiple" style="position:absolute; top:-100px;"/>
                <div id="upload" onclick="$('#fileupload').trigger('click');">
                    <span>Drag images here to upload.</span>
                </div>
                <button onclick="$('#fileupload').trigger('click'); return false;">Select photos from computer</button>
            </dd>
            <dt style="margin: 0 0 5px 130px; float: none; width: auto; text-align: left;">
        <div id="album">
            <input type="radio" id="album-0" name="album" value="create" checked="checked" onclick="switchAlbum(0)"><label for="album-0">Create album</label>
            <input type="radio" id="album-1" name="album" value="add" onclick="switchAlbum(1)"><label for="album-1">Add to album</label>
        </div>
        </dt>

        <dd style="margin: 0 0 5px 0;">
<div class="album-tab" id="album-tab-0">
<dl>
<dt>Gallery Title</dt>
<dd>{S_GALLERY_TITLE}</dd>
<dt>Gallery Permissions</dt>
<dd>{S_PERMISSIONS}</dd>
</dl>
</div>
<div class="album-tab" id="album-tab-1">
<dl>
<dt>Gallery</dt>
<dd>{S_GALLERIES}</dd>
</dl>
</div>
<!-- IF S_SHARE -->
<dt>{L_SHARE}</dt>
<dd>
<!-- IF S_SHARE_TWITTER -->
  <img src="https://g.twimg.com/twitter-bird-16x16.png" alt="Twitter" /> {S_SHARE_TWITTER}
  <!-- ENDIF -->
  <!-- IF S_SHARE_TUMBLR -->
  <img src="https://platform.tumblr.com/v1/share_4.png" alt="Tumblr" /> {S_SHARE_TUMBLR}
  <!-- ENDIF -->
  <!-- IF S_SHARE_FACEBOOK -->
  <span style="height: 18px; display: inline-block; background: #4c69ba; background: -webkit-gradient(linear, center top, center bottom, from(#4c69ba), to(#3b55a0)); background: -webkit-linear-gradient(#4c69ba, #3b55a0); border-color: #4c69ba; -webkit-border-radius: 2px;"><img src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yU/r/fWK1wxX-qQn.png" alt="Link Facebook account" /></span> {S_SHARE_FACEBOOK}
  <!-- ENDIF -->
  <input type="hidden" name="share" value="photo" />
  <br />
</dd>
<!-- ENDIF -->
    </dd>

    <dt><a id="show-advanced" href="#" onclick="return ToggleAdvanced();" class="hidden">Advanced Options <span>›</span></a></dt>
            <dd>&nbsp;</dd>
    <dt class="advanced-field"><label for="high-quality">High Quality <a href="">Learn More...</a></label></dt>
			<dd class="advanced-field">
				{S_HIGH_QUALITY}
			</dd>
            <dt class="advanced-field"><label for="publish-feed">Publish to Feed</label></dt>
			<dd class="advanced-field">
				{S_PUBLISH_FEED}
			</dd>
			<dt></dt>
			<dd>
                <div id="progressbar">
                    <div class="progress-label" style="width: 0%;">Processing...</div>
                </div>
				<button class="submit" name="save-photo" id="save-photo" title="Upload">Upload</button>
			</dd>
        </dl>

		<input type="hidden" name="module" value="galleries" />
		<input type="hidden" name="sub" value="upload" />
        <input type="hidden" name="save" value="Upload" />
        <input type="hidden" id="newest-id" name="newest-id" value="0" />
        </div>
</form>